<!DOCTYPE html>
<html>
  <head>
    <title>动画</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
      img {
        width: 400px;
        height: 400px;
        position: fixed;
        left: 0;
        z-index: 1;
        visibility: hidden;
      }
      div.sliderBar {
        position: relative;
        z-index: 100;
      }
      div.sliderBar a {
        display: inline-block;
        border: 1px solid black;
        width: 100px;
        background: #ccc;
      }

      /*定义动画*/
      @keyframes slideLeft {
        from {
          left: -300px;
        }
        to {
          left: 0px;
        }
      }
      @keyframes slideBottom {
        from {
          top: 350px;
        }
        to {
          top: 0px;
        }
      }
      @keyframes zoomIn {
        from {
          transform: scale(0);
        }
        to {
          transform: scale(1);
        }
      }
      @keyframes rotate {
        from {
          transform: rotate(0deg) scale(0);
        }
        to {
          transform: rotate(360deg) scale(1);
        }
      }
      /* 兼容ie9以下写法 */
      @-webkit-keyframes slideLeft {
        from {
          left: -300px;
        }
        to {
          left: 0px;
        }
      }
      @-webkit-keyframes slideBottom {
        from {
          top: 350px;
        }
        to {
          top: 0px;
        }
      }
      @-webkit-keyframes zoomIn {
        from {
          transform: scale(0);
        }
        to {
          transform: scale(1);
        }
      }
      @-webkit-keyframes rotate {
        from {
          transform: rotate(0deg) scale(0);
        }
        to {
          transform: rotate(360deg) scale(1);
        }
      }

      div > img:target {
        z-index: 20;
        visibility: visible;
      }
      /*使用 target 伪类触发动画*/
      .slideLeft:target {
        animation: slideLeft 5s;
        -webkit-animation: slideLeft 5s;
      }
      .slideBottom:target {
        animation: slideBottom 5s;
        -webkit-animation: slideBottom 5s;
      }
      .zoomIn:target {
        animation: zoomIn 5s;
        -webkit-animation: zoomIn 5s;
      }
      .rotate:target {
        animation: rotate 5s;
        -webkit-animation: rotate 5s;
      }
    </style>
  </head>
  <body>
    <div>
      <img id="img1" class="slideLeft" src="img/1.png" />
      <img id="img2" class="slideBottom" src="img/1.png" />
      <img id="img3" class="zoomIn" src="img/1.png" />
      <img id="img4" class="rotate" src="img/1.png" />
      <!--4个小图-->
      <div class="sliderBar">
        <a href="#img1">图一</a>
        <a href="#img2">图二</a>
        <a href="#img3">图三</a>
        <a href="#img4">图四</a>
      </div>
    </div>
  </body>
</html>
